<template>
  <div class="main">
    <el-row class="main-row">
      <router-view></router-view>
    </el-row>
    <div class="main-right">
      <div v-if="loginShow" class="login-panel"><LoginPanel /></div>
      <div>
        <!-- <el-button circle @click="goCustome" icon="el-icon-service"></el-button> -->
        <el-button
          circle
          icon="el-icon-service"
          @click="drawer = true"
          type="primary"
          style="margin-left: 16px"
        >
        </el-button>
      </div>
    </div>
  </div>
  <div v-dialogdrag>
    <el-dialog width="500px" title="智能客服" v-model="shouFlag" :modal="false">
      <Custome></Custome>
    </el-dialog>
  </div>

  <el-drawer
    title="智能客服"
    v-model="drawer"
    direction="rtl"
    :modal="false"
    :before-close="handleClose"
    destroy-on-close
  >
    <Custome></Custome>
  </el-drawer>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import LoginPanel from './cpns/login-panel.vue'
import Custome from '@/components/Custome/Custome.vue'

export default defineComponent({
  components: {
    LoginPanel,
    Custome,
  },
  setup() {
    const goCustome = () => {
      shouFlag.value = true
    }

    //控制显示隐藏
    const shouFlag = ref(false)
    const drawer = ref(false)
    const loginShow = ref(true)
    return { shouFlag, drawer, loginShow, goCustome }
  },
})
</script>

<style scoped lang="less">
.main {
  display: flex;
  justify-content: space-between;

  .main-row {
    width: 70rem;
    flex: 3;
  }
  .main-right {
    width: 320px;
    height: 100%;
    border-left: 1px solid #c8cdd3;
    padding: 20px;
    .login-panel {
      margin-bottom: 10px;
    }
  }
}
.el-row {
  margin-bottom: 20px;
  // .main-row-item {
  //   margin: 20px;
  //   height: 150px;
  //   line-height: 150px;
  //   width: 200px;
  //   background: #fff;
  //   text-align: center;
  // }

  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
</style>
